<!-- 添加任务 -->
<template>
  <div class="add-task">
    <van-nav-bar title="定时任务" left-arrow @click-left="() => $router.go(-1)" safe-area-inset-top>
      <template #left>
        <img style="width: 25px" src="../../assets/images/返回2.png" alt="" />
      </template>
    </van-nav-bar>
    <!-- 表单 -->
    <div class="form">
      <div>
        <span>是否启用</span>
        <van-switch v-model="form.state" size="16" />
      </div>
      <div>
        <span>选择开关</span>
        <van-popover v-model="showPopover" trigger="click" :actions="swlist" @select="onSelect" :offset="[-20, 8]">
          <template #reference>
            <span>{{ form.swname }}</span>
            <img src="../../assets/images/下拉.png" alt="" />
          </template>
        </van-popover>
      </div>
      <div>
        <span>开始时间</span>
        <span @click="sshow = true">{{form.stime}}</span>
        <van-popup v-model="sshow" position='bottom'>
          <van-datetime-picker @cancel="sshow=false" @confirm="sshow=false" v-model="form.stime" type="time"
            title="选择开始时间" />
        </van-popup>
      </div>
      <div>
        <span>结束时间</span>
        <span @click="eshow = true">{{form.etime}}</span>
        <van-popup v-model="eshow" position='bottom'>
          <van-datetime-picker @cancel="eshow=false" @confirm="eshow=false" v-model="form.etime" type="time"
            title="选择结束时间" />
        </van-popup>
      </div>
      <div>
        <span>重复方式</span>
        <van-popover v-model="showType" trigger="click" :actions="actions" @select="typeSelect" :offset="[-20, 8]">
          <template #reference>
            <span>{{ form.type }}</span>
            <img src="../../assets/images/下拉.png" alt="" />
          </template>
        </van-popover>
      </div>
      <div class="btn">
        <van-button round block type="info" @click="onSubmit"
          color="linear-gradient(to right, rgb(120, 184, 246), rgb(29,97,214))" style="font-size: 20px">保 存</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import Bus from '../../utils/bus.js'
import { deviceInfo, deviceRenWuAdd } from "../../api/device";
export default {
  name: "",
  data() {
    return {
      sshow: false,
      eshow: false,
      showPopover: false,
      showType: false,
      // 通过 actions 属性来定义菜单选项
      actions: [{ text: "只执行一次" }, { text: "周一到周五" }, { text: "每天" }],
      swlist: [],
      form: {
        state: true,
        swname: "请选择",
        index: 0,
        stime: '请选择',
        etime: '请选择',
        type: '只执行一次'
      },
    };
  },
  methods: {

    // 渔塘选择
    onSelect(action) {
      // this.$toast(action.text);
      this.form.index = action.id;
      this.form.swname = action.text;
    },
    // 方式选择
    typeSelect(val) {
      this.form.type = val.text
    },
    // 保存
    async onSubmit() {




      this.form.code = this.$route.query.code;
      this.form.userid = localStorage.getItem("userid");

      let res = await deviceRenWuAdd(this.form);
      if (res.status == 200) {
        this.$toast(res.message);
        setTimeout(() => {
          this.$router.back();
        }, 500);
      }

    },
    async init() {
      let res = await deviceInfo({ code: this.$route.query.code });

      if (res.status == 200) {
        var content = res.data.content;
        if (content != null && content != "") {

          this.swlist.push({ text: JSON.parse(content).sw1, id: 0 });
          this.swlist.push({ text: JSON.parse(content).sw2, id: 1 });
          this.swlist.push({ text: JSON.parse(content).sw3, id: 2 });
          this.swlist.push({ text: JSON.parse(content).sw4, id: 3 })

        } else {
          this.swlist.push({ text: "开关1" });
          this.swlist.push({ text: "开关2" });
          this.swlist.push({ text: "开关3" });
          this.swlist.push({ text: "开关4" });
        }

      }

    }
  },
  computed: {},
  watch: {},
  created() {
    this.init();
  },
  mounted() { },
  destroyed() {
    // Bus.$emit('task', "");
  },
};
</script>

<style lang="scss" scoped>
.add-task {
  width: 100%;
  height: 100%;

  .form {
    width: 93%;
    height: calc(100% - 220px);
    background-color: #fff;
    margin: 20px auto;
    border-radius: 15px;
    overflow: hidden;
    padding: 20px;

    .btn {
      width: 50%;
      border: none;
      margin: 100px auto 0;
    }

    >div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 26px;
      border-bottom: 1px solid #ccc;
      padding: 10px;
      margin-bottom: 20px;

      img {
        width: 26px;
        margin-left: 20px;
      }
    }
  }
}
</style>
